<template>
  <div class="policy-page w">
        <el-card class="box-card" shadow="hover">
          <template #header>
            <el-page-header @back="router.back()">
              <template #title>
                <el-text size="large" tag="b">Policies</el-text>
              </template>
              <template #content>
                <el-text size="large" type="primary" tag="b">Privacy Policy</el-text>
              </template>
            </el-page-header>
          </template>
          
          <div class="policy-content">
            <h2>1. Information Collection</h2>
            <div class="section-content">
              <p>We collect various types of information to provide and improve our services:</p>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="Personal Information">
                  Name, email address, shipping address, phone number
                </el-descriptions-item>
                <el-descriptions-item label="Payment Information">
                  Credit card details (processed securely through our payment provider)
                </el-descriptions-item>
                <el-descriptions-item label="Usage Data">
                  Browser type, IP address, device information, browsing patterns
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <h2>2. Use of Information</h2>
            <div class="section-content">
              <el-timeline>
                <el-timeline-item type="primary">
                  <h4>Order Processing</h4>
                  <p>Process and fulfill your orders, send order confirmations and updates</p>
                </el-timeline-item>
                <el-timeline-item type="success">
                  <h4>Customer Service</h4>
                  <p>Provide customer support and respond to your inquiries</p>
                </el-timeline-item>
                <el-timeline-item type="warning">
                  <h4>Marketing</h4>
                  <p>Send promotional materials (with your consent)</p>
                </el-timeline-item>
                <el-timeline-item type="info">
                  <h4>Service Improvement</h4>
                  <p>Analyze usage patterns to improve our website and services</p>
                </el-timeline-item>
              </el-timeline>
            </div>

            <h2>3. Data Protection</h2>
            <div class="section-content">
              <el-alert
                title="Security Measures"
                type="success"
                description="We use industry-standard encryption and security protocols to protect your data"
                :closable="false"
                show-icon
                class="mb-4"
              />
              <el-alert
                title="Data Storage"
                type="info"
                description="Your data is stored in secure servers with regular backups and monitoring"
                :closable="false"
                show-icon
                class="mb-4"
              />
              <el-alert
                title="Access Control"
                type="warning"
                description="Strict access controls and authentication measures are in place"
                :closable="false"
                show-icon
              />
            </div>

            <h2>4. Your Rights</h2>
            <div class="section-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <h3>Access Rights</h3>
                      </div>
                    </template>
                    <div>Request a copy of your personal data</div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <h3>Modification Rights</h3>
                      </div>
                    </template>
                    <div>Update or correct your personal information</div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <template #header>
                      <div class="card-header">
                        <h3>Deletion Rights</h3>
                      </div>
                    </template>
                    <div>Request deletion of your personal data</div>
                  </el-card>
                </el-col>
              </el-row>
            </div>

            <div class="contact-section">
              <el-divider>Contact Us</el-divider>
              <el-result
                icon="info"
                title="Privacy Concerns?"
                sub-title="Our dedicated privacy team is here to help"
              >
                <template #extra>
                  <el-button type="primary" @click="router.push('/contact')">Contact Privacy Team</el-button>
                </template>
              </el-result>
            </div>
          </div>
        </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-content {
  padding: 20px 0;
}

.section-content {
  margin: 20px 0 40px;
}

h2 {
  color: var(--el-text-color-primary);
  margin-top: 30px;
}

.mb-4 {
  margin-bottom: 16px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.contact-section {
  margin-top: 40px;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}

:deep(.el-timeline-item__content h4) {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

:deep(.el-timeline-item__content p) {
  margin: 8px 0 0;
  color: var(--el-text-color-regular);
}
</style> 